import { Button, message, Form, Input, Space, Select, Radio } from "antd";
import { useModel } from "umi";

import useUpdateApplication from "../../hooks/application/person/useUpdateApplication";
import useAllCategory from "../../hooks/application/person/useAllCategory";
import useAllRoles from "../../hooks/application/person/useAllRoles";

const { Option } = Select;

const EditApplicationForm = ({ record, reloadData }) => {
    const { onCloseGlobalModal } = useModel("global.modal");
    const [form] = Form.useForm();

    const { submitLoading, updateApplication } = useUpdateApplication();
    const { loading: roleLoading, roles } = useAllRoles();
    const { loading: categoryLoading, categories } = useAllCategory();

    const onFinish = async (values) => {
        let variables = {
            appUpti: new Date().getUTCTime(),
            ...values,
        };
        updateApplication(record.appUuid, variables, (res) => {
            if (res) {
                message.success("成功更新应用信息");
                reloadData();
                onCloseGlobalModal();
            }
        });
    };

    const appNameValidater = (rule, value) => {
        if (value && /^[\u4e00-\u9fa5a-zA-Z]{2,30}$/.test(value)) {
            return Promise.resolve();
        } else {
            return Promise.reject("应用名称只能输入中文、英文、数字、括号，最多120个字符");
        }
    };

    return (
        <div style={{ padding: "0 30px 30px 30px" }}>
            <Form form={form} onFinish={onFinish} layout="horizontal" labelCol={{ span: 6 }} wrapperCol={{ span: 16 }} initialValues={record}>
                <Form.Item label="应用名称" name="appName" rules={[{ required: true, validator: appNameValidater }]}>
                    <Input />
                </Form.Item>

                <Form.Item label="所需登录状态" name="appLogin" rules={[{ required: true }]}>
                    <Radio.Group>
                        <Radio value="localLogined">本地登录</Radio>
                        <Radio value="remoteLogined">远程登录</Radio>
                    </Radio.Group>
                </Form.Item>

                <Form.Item label="所属角色" name="appRole" rules={[{ required: true, message: "请选择所属角色" }]}>
                    <Select allowClear loading={roleLoading}>
                        {roles.map((item, index) => (
                            <Option key={index} value={item.parName}>
                                {item.parName}
                            </Option>
                        ))}
                    </Select>
                </Form.Item>

                <Form.Item label="应用分类" name="pacName" rules={[{ required: true, message: "请选择应用分类" }]}>
                    <Select allowClear loading={categoryLoading}>
                        {categories.map((item, index) => (
                            <Option key={index} value={item.pacName}>
                                {item.pacName}
                            </Option>
                        ))}
                    </Select>
                </Form.Item>

                <Form.Item label="应用描述" name="appDesc">
                    <Input.TextArea />
                </Form.Item>

                <div style={{ textAlign: "center" }}>
                    <Space>
                        <Button loading={submitLoading} type="primary" htmlType="submit">
                            保存应用信息
                        </Button>
                        <Button loading={submitLoading} htmlType="button" onClick={() => form.resetFields()}>
                            重置
                        </Button>
                    </Space>
                </div>
            </Form>
        </div>
    );
};

export default EditApplicationForm;
